<template>
  <div class="ract-box">
    <el-form
      :model="queryContractParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
  
      <el-form-item label="项目编号" prop="bindCode" style="margin-top: 20px;margin-left: 30px;">
        <el-input
          v-model="queryContractParams.bindCode"
          placeholder="请输入项目编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          style="margin-top: 22px;"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待签订" name="contract_one">
        <el-table v-loading="loading" :data="bindList">
          <!-- 添加序号列 -->
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
            index-method="indexMethod"
          />
          <el-table-column label="项目编号" align="center" prop="bindCode" />
          <el-table-column label="项目名称" align="center" prop="bindName" />
          <el-table-column label="招标方式" align="center" prop="bindMethod">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.pur_methods"
                :value="scope.row.bindMethod"
              />
            </template>
          </el-table-column>

          <el-table-column label="项目负责人" align="center" prop="bindHeader">
            <template slot-scope="scope">
              <span>{{ scope.row.bindHeader || "————" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.pur_bind_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="createContract(scope.row)"
                v-show="scope.row.status > 1"
                v-hasPermi="['purs:bind:edit']"
                >创建合同</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="签订中" name="contract_two">
        <el-table v-loading="loading" :data="contractList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="合同编号"
            align="center"
            prop="contractCode"
          />

          <el-table-column label="项目编号" align="center" prop="bindCode" />
          <el-table-column
            label="合同名称"
            align="center"
            prop="contractName"
          />
          <el-table-column label="合同类型" align="center" prop="contractType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.bs_contract_type"
                :value="scope.row.contractType" /></template
          ></el-table-column>

          <el-table-column label="合同金额" align="center" prop="totalMoney" />
          <el-table-column label="合同说明" align="center" prop="remark" />

          <el-table-column label="密级" align="center" prop="privacy" />

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="updateContract(scope.row)"
                v-hasPermi="['basic:contract:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['basic:contract:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryContractParams.pageNum"
          :limit.sync="queryContractParams.pageSize"
          @pagination="getContractByStatu"
        />
      </el-tab-pane>
      <el-tab-pane label="已生效" name="contract_three">
        <el-table v-loading="loading" :data="contractList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="合同编号"
            align="center"
            prop="contractCode"
          />

          <el-table-column label="项目编号" align="center" prop="bindCode" />
          <el-table-column
            label="合同名称"
            align="center"
            prop="contractName"
          />
          <el-table-column label="合同类型" align="center" prop="contractType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.bs_contract_type"
                :value="scope.row.contractType" /></template
          ></el-table-column>

          <el-table-column label="合同金额" align="center" prop="totalMoney" />
          <el-table-column label="合同说明" align="center" prop="remark" />

          <el-table-column label="密级" align="center" prop="privacy" />

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="updateContract(scope.row)"
                v-hasPermi="['basic:contract:edit']"
                >查看合同</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['basic:contract:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryContractParams.pageNum"
          :limit.sync="queryContractParams.pageSize"
          @pagination="getContractByStatu"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  listBind,
  getBind,
  delBind,
  addBind,
  updateBind,
} from "@/api/purs/bind";
import {
  listAgree,
  getAgree,
  delAgree,
  addAgree,
  updateAgree,
} from "@/api/basic/agree";

import {
  listContract,
  getContract,
  delContract,
  addContract,
  updateContract,
} from "@/api/basic/contract";
export default {
  dicts: ["pur_methods", "pur_bind_status", "bs_contract_type","bs_constract_statu"],
  data() {
    return {
      activeName: "contract_one",
      contractList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 招标项目表格数据
      bindList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 6,
      },
      // 查询参数
      queryContractParams: {
        pageNum: 1,
        pageSize: 10,
        contractStatu: 1,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询合同列表 */
    getContractByStatu() {
      this.loading = true;
      listContract(this.queryContractParams).then((response) => {
        this.contractList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryContractParams.pageNum = 1;
      this.getContractByStatu();
    },
    /** 重置按钮操作 */
    resetQuery() {
      console.log(JSON.stringify(this.queryContractParams));
      this.handleQuery();
    },

    //创建合同
    createContract(row) {
      this.$tab.closeOpenPage({
        path: "/create/contract",
        query: {
          item: row,
        },
      });
    },

    handleClick(tab, event) {
      if (tab.name == "contract_one") {
        this.getList();
      } else if (tab.name == "contract_two") {
        this.queryContractParams.contractStatu = 1;
        this.getContractByStatu();
      } else {
        this.queryContractParams.contractStatu = 2;
        this.getContractByStatu();
      }
    },
    /** 进入项目*/
    checkDetails(row) {
      this.$tab.closeOpenPage({
        path: "/details/bind",
        query: {
          bind: row,
        },
      });
    },

    /**编辑 */
    updateContract(row) {
      this.$tab.closeOpenPage({
        path: "/update/contract",
        query: {
          item: row,
        },
      });
    },
    /** 查询招标项目列表 */
    getList() {
      this.loading = true;
      this.queryParams.status = 6;
      listBind(this.queryParams).then((response) => {
        this.bindList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    indexMethod(index) {
      // 根据需要自定义序号生成方式，这里只是简单返回索引+1
      return index + 1;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const bindCodes = row.bindCode || this.ids;
      this.$modal
        .confirm('是否确认删除招标项目编号为"' + bindCodes + '"的数据项？')
        .then(function () {
          return delBind(bindCodes);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style scope>
</style>